<template>
  <div class="register-container">
    <!-- 顶部导航栏 -->
    <div class="header">
      <a @click="goBack" class="back-arrow">←</a>
      <div class="header-title">注册</div>
    </div>
    
    <!-- 欢迎文本 -->
    <div class="welcome">欢迎注册</div>
    
    <!-- 注册表单 -->
    <form @submit.prevent="handleRegister" class="register-form">
      <!-- 手机号码 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">手机号码</div>
          <input type="tel" v-model="formData.phone" class="input-field" placeholder="请输入手机号码" maxlength="11" required>
        </div>
      </div>
      
      <!-- 真实姓名 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">真实姓名</div>
          <input type="text" v-model="formData.name" class="input-field" placeholder="请输入真实姓名" required>
        </div>
        <div class="hint">真实姓名便于查看体检报告</div>
      </div>
      
      <!-- 生日 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">生日</div>
          <div class="date-display" @click="showDatePicker = true">
            {{ formData.birthday || '年 / 月 / 日' }}
          </div>
          <div class="calendar-icon">📅</div>
        </div>
      </div>
      
      <!-- 日期选择器 -->
      <div v-if="showDatePicker" class="date-picker-modal">
        <div class="date-picker-header">
          <span @click="showDatePicker = false">取消</span>
          <span>选择日期</span>
          <span @click="confirmDate">确定</span>
        </div>
        <input type="date" v-model="tempDate" class="date-input">
      </div>
      
      <!-- 性别 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">性别</div>
          <div class="gender-options">
            <label class="gender-option">
              <input type="radio" v-model="formData.gender" value="male">
              <span>男</span>
            </label>
            <label class="gender-option">
              <input type="radio" v-model="formData.gender" value="female">
              <span>女</span>
            </label>
          </div>
        </div>
      </div>
      
      <!-- 身份证号 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">身份证号</div>
          <input type="text" v-model="formData.idCard" class="input-field" placeholder="请输入身份证号" maxlength="18" required>
        </div>
      </div>
      
      <!-- 密码 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">密码</div>
          <div class="password-container">
            <input :type="showPassword ? 'text' : 'password'" v-model="formData.password" class="input-field" placeholder="请输入密码" required>
            <button type="button" class="toggle-password" @click="showPassword = !showPassword">
              {{ showPassword ? '隐藏' : '显示' }}
            </button>
          </div>
        </div>
      </div>
      
      <!-- 确认密码 -->
      <div class="form-group">
        <div class="form-row">
          <div class="label">确认密码</div>
          <div class="password-container">
            <input :type="showConfirmPassword ? 'text' : 'password'" v-model="formData.confirmPassword" class="input-field" placeholder="请再次输入密码" required>
            <button type="button" class="toggle-password" @click="showConfirmPassword = !showConfirmPassword">
              {{ showConfirmPassword ? '隐藏' : '显示' }}
            </button>
          </div>
        </div>
      </div>
      
      <!-- 完成按钮 -->
      <button type="submit" class="submit-btn">完成</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    return {
      formData: {
        phone: '',
        name: '',
        birthday: '',
        gender: 'male',
        idCard: '',
        password: '',
        confirmPassword: ''
      },
      showPassword: false,
      showConfirmPassword: false,
      showDatePicker: false,
      tempDate: ''
    }
  },
  methods: {
    goBack() {
      this.$router.push('/loginview')
    },
    confirmDate() {
      this.formData.birthday = this.formatDate(this.tempDate)
      this.showDatePicker = false
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}年 ${month}月 ${day}日`
    },
    handleRegister() {
      // 表单验证
      if (this.formData.phone.length !== 11) {
        alert('请输入正确的11位手机号码')
        return
      }
      
      if (this.formData.password.length < 6) {
        alert('密码长度不能少于6位')
        return
      }
      
      if (this.formData.password !== this.formData.confirmPassword) {
        alert('两次输入的密码不一致')
        return
      }
      
      if (!this.formData.birthday) {
        alert('请选择生日')
        return
      }
      
      // 模拟注册成功
      this.$router.push('/loginview')
    }
  }
}
</script>

<style scoped>
.register-container {
  max-width: 100%;
  padding: 0 20px;
  min-height: 100vh;
  background: white;
}

.header {
  display: flex;
  align-items: center;
  height: 60px;
  position: relative;
  border-bottom: 1px solid #f0f0f0;
}

.back-arrow {
  position: absolute;
  left: 0;
  font-size: 24px;
  color: #333;
  text-decoration: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}

.welcome {
  text-align: center;
  margin: 30px 0;
  font-size: 24px;
  font-weight: 500;
  color: #333;
}

.form-group {
  margin-bottom: 25px;
}

.form-row {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.label {
  width: 100px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.input-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 8px 0;
  background: transparent;
}

.input-field::placeholder {
  color: #999;
}

.hint {
  font-size: 14px;
  color: #999;
  margin-top: 5px;
  margin-left: 100px;
}

.date-display {
  flex: 1;
  color: #999;
  cursor: pointer;
}

.calendar-icon {
  margin-left: 10px;
  font-size: 18px;
}

.date-picker-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 1000;
}

.date-picker-header {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.date-input {
  width: 100%;
  padding: 15px;
  border: none;
  outline: none;
  font-size: 16px;
}

.gender-options {
  display: flex;
  align-items: center;
  gap: 20px;
}

.gender-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gender-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: #1abc9c;
}

.password-container {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.toggle-password {
  position: absolute;
  right: 0;
  background: none;
  border: none;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 16px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 30px;
  transition: background-color 0.2s;
}

.submit-btn:active {
  background-color: #16a085;
}

@media (max-width: 480px) {
  .register-container {
    padding: 0 15px;
  }
  
  .label {
    width: 90px;
    font-size: 15px;
  }
  
  .hint {
    margin-left: 90px;
  }
}
</style>